<template>
	<view class="pages">
		<view class="main">
			<view class="info_item u-flex u-flex-between" v-for="(item,index) in integral_list" :key="index">
				<view class="u-flex-column info_item_left">
					<text>{{item.title}}</text>
					<text>{{item.createdAt}}</text>
				</view>
				<text :class="item.type==1?'num':'num1'">{{item.type==1?'+':'-'}}{{item.integral}}</text>
			</view>
		</view>
		<u-empty
		v-if="integral_list.length==0"
		textSize='30'
		        mode="data"
				width="200"
				height="200"
				icon="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E6%95%B0%E6%8D%AE%E4%B8%BA%E7%A9%BA.png"
		>
		</u-empty>
	</view>
</template>

<script>
	import {
		getIntegralDetail,
		user_getIntegralDetail
	} from '@/common/api.js';
	export default {
		data() {
			return {
				integral_list:[],
				page:1,
				perPage:10,
				count:0,
				status :'more'
			}
		},
		onReachBottom() {
			// alert('下啦')
			if(this.page>1){
				this.get_IntegralDetail()
			};
			
			
		},
		onLoad(option) {
			try {
				if (uni.getStorageSync('access_token')) {
					// this.is_login = true
					
					this.userId=option.userId
					this.init()
					// this.getMember_List()
					// this.get_UserInfo()
				} else {
					uni.navigateTo({
						url: '/pages/guide/index'
					})
					// this.is_login = false
				}		
			} catch (e) {
				//TODO handle the exception
			}
				
			
		},
		methods:{
			init(){
				this.page=1
				// this.proData=[]
				this.count=0
				setTimeout(()=>{
					this.get_IntegralDetail()
				},300)
			},
			get_IntegralDetail(){
				let data = {
					params: {
						userId: this.userId,
						page:this.page,
						perPage:this.perPage
					}
				}
				
					getIntegralDetail(data, {
						custom: {
							auth: false,
							toast: false,
							catch: false
						}
					}).then((result) => {
						this.integral_list = [...this.integral_list, ...result.list]
						this.count=result.count
						result.list.length <= 0 ? this.status = 'noMore' : this.status = 'more'
						this.page++;
					}).catch((err) => {
						
					})
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	.pages{
		padding:20rpx;
		box-sizing:border-box;
		.main{
			background-color: #fff;
			border-radius: 30rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			.info_item{
				height:140rpx;
				align-items: center;
				border-bottom:1rpx solid #EEEEEE;
				&:last-child{
					border-bottom:1rpx solid #fff;
				}
				.info_item_left{
					text{
						&:first-child{
							font-size: 32rpx;
							color: #000000;
							margin-bottom: 23rpx;
						}
						&:last-child{
							font-size: 28rpx;
							color: #A8A8A8;
						}
					}
				}
				.num{
					color: #FF6C00;
					font-weight: bold;
					font-size: 36rpx;
				}
				.num1{
					color: #B0B0B0;
					font-weight: bold;
					font-size:36rpx;
				}
			}
		}
	}
</style>